import {useState, useEffect} from 'react';
import {Col, Form, Input, message, Modal, Radio, Row, Tooltip} from 'antd';
import {InfoCircleOutlined} from '@ant-design/icons';
import {refundContract} from "@/services/contract";

const RefundContract = (props: any) => {
  const {visible, onClose, onOk, data} = props
  console.log(data)
  const [form] = Form.useForm()
  const {TextArea} = Input;
  const [value, setValue] = useState(null)
  useEffect(() => {
    if (visible) {
      setValue(null)
      form.resetFields();
    }
  }, [form, visible]);
  const handleOk = () => {
    form.validateFields().then(values => {
      const body = {
        ...values,
        contractId: data.contract_id
      }
      console.log(body)
      refundContract(body).then(res => {
        if (res.status === 200) {
          onOk()
          message.success(res.message).then()
        } else {
          message.error(res.message).then()
        }
      })
    })
  }
  return (
    <Modal
      title={'用户退费'}
      visible={visible}
      onCancel={onClose}
      width={'50vw'}
      onOk={handleOk}
      keyboard={false}
      maskClosable={false}
    >
      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} autoComplete="off">
        <Row>
          <Col span={12}>
            <Form.Item label="退费类型" name={'refund_type'} rules={[{required: true, message: '请选择退费类型'}]}>
              <Radio.Group onChange={(e: any) => setValue(e.target.value)}>
                <Radio value={0}>部分退费</Radio>
                <Radio value={1}>全部退费</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          {value === 0 ? <>
            <Col span={12}>
              <Form.Item name='is_active' label='是否离网' rules={[{required: true, message: '选择是否立即离网'}]}>
                <Radio.Group>
                  <Radio value={0}>否</Radio>
                  <Radio value={1}>是</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name='expense_type' label='退费产品' rules={[{required: true, message: '选择退费产品'}]}>
                <Radio.Group>
                  <Radio value={0}>网时费用</Radio>
                  <Radio value={1}>光猫费用</Radio>
                  <Radio value={2}>路由器费</Radio>
                </Radio.Group>
              </Form.Item>
            </Col></> : null}
          <Col span={12}>
            <Form.Item name='bank_number' label='银行账号' rules={[{required: true, message: '请输入银行账号'}]}>
              <Input suffix={<Tooltip title='必填项,银行账号'>
                <InfoCircleOutlined style={{color: 'rgba(0,0,0,.45)'}}/>
              </Tooltip>}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name='bank_name' label='账户姓名' rules={[{required: true, message: '请输入账户姓名'}]}>
              <Input suffix={<Tooltip title='必填项,账户姓名'>
                <InfoCircleOutlined style={{color: 'rgba(0,0,0,.45)'}}/>
              </Tooltip>}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name='bank' label='开户行' rules={[{required: true, message: '请输入开户行'}]}>
              <Input suffix={<Tooltip title='必填项,开户行'>
                <InfoCircleOutlined style={{color: 'rgba(0,0,0,.45)'}}/>
              </Tooltip>}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name='expense_total' label='退费金额' rules={[{required: true, message: '请输入退费金额'}]}>
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name='memo' label='备注' rules={[{required: true, message: '输入原因'}]}>
              <TextArea autoSize/>
            </Form.Item>
          </Col>
        </Row>
      </Form>

    </Modal>
  );
};

export default RefundContract;
